<template>
  <div>
    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :render-content="renderContent">
    </el-tree>
   <Dialog ref="child" :title="title"></Dialog>
  </div>
 
</template>

<script>

import Dialog from './Dialog.vue'
 export default {
  components:{
    Dialog
  },
    data() {
      
      return {
        dialogVisible:false,
        title:'标题',
        data:[{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
         
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }],
        
      }
    },

    methods: {
      append(data) {
         console.log('新增----------',this.$refs)
      },

      remove(node, data) {
        console.log(node,data)
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },
      updata(){
        console.log('修改---------')
      },

      renderContent(h, { node, data }) {
       
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
           { node.level==1?<span>
              <el-button size="mini" type="text" on-click={ () => this.append(data) }>新增</el-button>
                <el-button size="mini" type="text" on-click={ () => this.updata(data) }>修改</el-button>
              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
            </span>:<span>

                <el-button size="mini" type="text" on-click={ () => this.unpdata(data) }>修改</el-button>
              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
            </span>}
          </span>);
      }
    }
  };

</script>

<style>
 
</style>